import React from 'react'
import { NavBar } from 'antd-mobile'
import { LeftOutline } from 'antd-mobile-icons'
import styles from './css/index.module.css'

interface ProgressStep {
  label: string
  active: boolean
}

interface NavbarProps {
  title?: React.ReactNode
  showBack?: boolean
  onBack?: () => void
  right?: React.ReactNode
  progressSteps?: ProgressStep[]
}

function Navbar({ title = '', showBack = false, onBack, right, progressSteps }: NavbarProps) {
  const rightNodes = React.Children.toArray(right)
  const titleNodes = React.Children.toArray(title)
  
  return (
    <div className={styles.navbarContainer}>
      <NavBar
        className={styles.navbar}
        backIcon={showBack ? <LeftOutline /> : false}
        onBack={onBack}
        right={rightNodes}
      >
        {titleNodes}
      </NavBar>
      {progressSteps && progressSteps.length > 0 && (
        <div className={styles.progressContainer}>
          <div className={styles.progressBar}>
            {progressSteps.map((step, index) => (
              <React.Fragment key={index}>
                <div className={`${styles.progressStep} ${step.active ? styles.active : ''}`}>
                  <div className={styles.progressStepIcon}>{index + 1}</div>
                  {step.label}
                </div>
                {index < progressSteps.length - 1 && (
                  <div className={styles.progressArrow}>→</div>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

export default Navbar
